<template>
  <div>
    <span>订单管理</span>
    <!-- 搜索 -->
    <div style="margin-top: 15px">
      <el-input
        placeholder="请输入内容"
        v-model="input3"
        class="input-with-select">
        <el-select v-model="select" slot="prepend" placeholder="请选择搜索条件">
          <el-option label="订单编号" value="1"></el-option>
          <el-option label="用户ID" value="2"></el-option>
          <el-option label="汽车ID" value="3"></el-option>
        </el-select>
        <el-button slot="append" icon="el-icon-search"
        @click="search()"></el-button>
      </el-input>
    </div>
    <!-- 展示所有订单 -->
    <el-table :data="data" style="width: 100%">
      <!-- 订单号 -->
      <el-table-column label="订单号" width="80">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>订单号: {{ scope.row.order_id }}</p>
            <p>下单用户:{{ scope.row.ouser_id }}</p>
            <p>订单价格: {{ scope.row.order_price }}</p>
            <p>下单车辆: {{ scope.row.ocar_id }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.order_id }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <!-- 订单编号 -->
      <el-table-column label="订单编号" width="150">
        <template slot-scope="scope">
          {{ scope.row.order_code_id }}
        </template>
      </el-table-column>

      <!-- 租车时间 -->
      <el-table-column label="租车时间" width="180">
        <template slot-scope="scope">
          {{ scope.row.order_renttime }}9:00
        </template>
      </el-table-column>
      <!-- 还车时间 -->
      <el-table-column label="还车时间" width="180">
        <template slot-scope="scope">
          {{ scope.row.order_returntime }}9:00
        </template>
      </el-table-column>
      <!-- 租还车地点 -->
      <el-table-column label="租还车地点" width="300">
        <template slot-scope="scope">
          {{ scope.row.order_carlocation }}
        </template>
      </el-table-column>
      <!-- 租赁天数 -->
      <el-table-column label="租赁天数" width="90">
        <template slot-scope="scope"> {{ scope.row.order_day }}天 </template>
      </el-table-column>
      <!-- 租赁价格 -->
      <el-table-column label="租赁价格" width="90">
        <template slot-scope="scope"> {{ scope.row.order_price }}￥ </template>
      </el-table-column>
      <!-- 支付状态 -->
      <el-table-column label="支付状态" width="90">
        <template slot-scope="scope">
          {{ scope.row.order_success }}
        </template>
      </el-table-column>
      <!-- 支付用户 -->
      <el-table-column label="支付用户" width="90">
        <template slot-scope="scope">
          {{ scope.row.ouser_id }}
        </template>
      </el-table-column>

      <el-table-column label="操作" fixed="right">
        <template slot-scope="scope">
          <!-- <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button> -->
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row.order_id, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [],
      input3: "",
      select: "",
    };
  },
  mounted() {
    this.getdata();
  },
  methods: {
    search(){
      console.log(this.select,this.input3)
      if(this.select==1){
        // console.log('按订单号搜搜')
      }else if(this.select==2){
        // console.log('按照用户id搜索')
      }else{
          // console.log('333')
      }
    },
    handleEdit(index, row) {
      // console.log(index, row);
    },
    handleDelete(index, row) {
      // console.log(index, row);
        this.$confirm("此操作讲永久删除订单!是否删除订单?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.axios.post("/admin/deleteorder", `id=${index}`).then((res) => {
            // console.log(res);
            if (res.data.code == 200) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.getdata()
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    getdata() {
      this.axios.post("/admin/getdataorder").then((res) => {
        // console.log(res.data.data);
        this.data = res.data.data;
      });
    },
  },
};
</script>
<style>
.el-select .el-input {
  width: 130px;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
</style>

<style lang="scss" scoped></style>
